<template>
  <div class="searchHistory-wrap">
    <van-cell title="搜索历史">
      <div slot="right-icon">
        <div v-if="isShowText">
          <span style="margin-right: 5px" @click="allDelete()">全部删除</span>
          <span @click="isShowText = false">完成</span>
        </div>
        <van-icon
          name="delete-o"
          class="icon-delete"
          v-else
          @click="isShowText = true"
        />
      </div>
    </van-cell>
    <van-cell
      :title="str"
      v-for="(str, index) in searchHistoryList"
      :key="index"
      @click="deleteD(str)"
    >
      <van-icon name="close" v-if="isShowText" />
    </van-cell>
  </div>
</template>
<script>
export default {
  name: 'searchHistory',
  data () {
    return {
      isShowText: false
    }
  },
  props: {
    searchHistoryList: {
      type: Array,
      required: true
    }
  },
  components: {},
  methods: {
    // 删除所有数据
    allDelete () {
      this.$emit('deleteHistoryD')
    },

    // 点击删除的小圆圈
    deleteD (str) {
      /* 如果是删除的状态-删除 */
      if (this.isShowText) {
        return this.$emit('deleteHistoryD', str) // return 是跳出函数，下面的就不会再执行
      }
      /* 如果是非删除状态-跳转到搜索结果页面 */
      this.$emit('deleteHistory', str)
    }
  }
}
</script>
<style scoped lang="less">
.searchHistory-wrap {
  .icon-delete {
    padding-top: 5px;
  }
}
</style>
